等),tagsInput 是用户用于输入的文本框(通常应该为
),应该包含在 tagsBox 之内;
* 通常的 DOM 结构是:
*
*
*
* 用户在 tagsInput 中完成输入(敲击空格或回车)时,用户输入的内容会被以空白符为间隔,解析成若干个 tag;
* 这些 tag 将被插入到 tagsBox 之内,位于 tagsInput 之前;
* tag 的 DOM 结构请参阅 './tagTpl.tpl' 文件
* 2) tagsBox 需添加样式名“wgt_tagsInput”,如果不使用默认样式,则可忽略此要求
* 3) resetTags() 方法将使用参数传入的标签文本,重新生成并渲染全部 tag(tagsBox 中原有的 tag 将被移除)
* 4) TriggerTagAdd 参数用于配置触发添加 tag 的行为,可选值有 ENTER,SPACE,BLUR,支持多种行为,以 | 分割
* 4) onTagAdd() 回调被调用时,传入参数:1.{Array} 新增 tag 的文本数组;2.{jQuery Object} 新增 tag 的 jQuery 对象
* 5) onTagRemove() 回调被调用时,传入参数:1.{String} 被移除 tag 的文本内容
* 6) onTagsInputComplete() 回调被调用时,传入参数:1.{Array} 全部 tag 的文本数组;2.{jQuery Object} 全部 tag 的 jQuery 集合对象;
* 如果 tagsMaxCount 没有被指定(默认值Infinity),则此回调永远不会被调用
*
* @example // 典型的调用示例
var TagsInput = require('wiki-common:widget/ui/tagsInput/tagsInput.js');
var tagsInput = new TagsInput({
tagsBox: '#tagsInputBox #tagsBox',
tagsInput: '#tagsInputBox #tagsInput',
tagsMaxCount: 5
});
*/
var $ = require('wiki-common:widget/lib/jquery/jquery'),
JSmart = require('wiki-common:widget/lib/jsmart/jsmart'),
safeCall = require('wiki-common:widget/util/safeCall');
JSmart.prototype.registerPlugin('modifier', 'trim', $.trim);
var tagTpl = new JSmart("\n
\n{%$tag.text|trim|escape|f_escape_xml%} \n{%if !$clickRemove%}\n× \n{%/if%}\n \n".replace(/\s*\s*/g, ''));
// 构建 tags
function buildTags() {
var inputText = $.trim(this.tagsInput.val());
if (!inputText) {
return;
}
if (!this.ignoreSpace) {
var newTagsText = inputText.split(/\s+/);
} else {
var newTagsText = inputText.split(/\n+|\r+/);
}
// validate
if (this.validation && !safeCall(this.validation, [newTagsText], this)) {
return;
}
var newTags = [];
for (var i in newTagsText) {
newTags.push({
text: newTagsText[i]
});
}
var newTagHTML = '';
for (var i in newTags) {
newTagHTML += addTag.call(this, newTags[i]);
}
newTagNodes = $(newTagHTML);
this.tagsInput.val('');
safeCall(this.onTagAdd, [newTags, newTagNodes], this);
var tags = $('.tag', this.tagsBox);
if (tags.length >= this.tagsMaxCount) {
this.tagsInput.hide();
safeCall(this.onTagsInputComplete, [$('.tag-con', tags).map(function() {
return $(this).text();
}), tags], this);
}
}
// 构建 tag 元素
function addTag(tagData) {
var curTagsCount = $('.tag', this.tagsBox).length;
if (curTagsCount >= this.tagsMaxCount) {
return;
}
var tagHTML = tagTpl.fetch({
tag: tagData,
clickRemove: this.clickRemove
});
var tag = $(tagHTML);
if (tagData.data) {
tag.data(tagData.data);
}
if (this.tagsBox.find('.tag').length > 0) {
this.tagsBox.find('.tag:last').after(tag);
} else {
this.tagsBox.prepend(tag);
}
return {
tagHTML,
tag
};
}
// 移除 tag 元素
function removeTag(tag) {
if (tag.length) {
safeCall(this.onTagRemove, [$('.tag-con', tag).text(), tag], this);
tag.remove();
}
}
var timer = '';
function TagsInput(args) {
if (!args) {
throw new Error('[TagsInput Exception]: No arguments.');
} else if (!$(args.tagsBox).length) {
throw new Error('[TagsInput Exception]: Invalid argument "tagsBox".');
} else if (!$(args.tagsInput).length) {
throw new Error('[TagsInput Exception]: Invalid argument "tagsInput".');
} else {
this.tagsBox = $(args.tagsBox);
this.tagsInput = $(args.tagsInput);
this.tagsMaxCount = isNaN(parseInt(args.tagsMaxCount)) ? Infinity : Math.abs(parseInt(args.tagsMaxCount));
this.TriggerTagAdd = (args.TriggerTagAdd || 'ENTER|SPACE|BLUR').toUpperCase().split('|');
this.ignoreSpace = args.ignoreSpace || false;
this.disableEnterTriggerTagAdd = true;
this.disableSpaceTriggerTagAdd = true;
this.disableBlurTriggerTagAdd = true;
this.clickRemove = args.clickRemove;
for (var i in this.TriggerTagAdd) {
switch (this.TriggerTagAdd[i]) {
case 'ENTER':
this.disableEnterTriggerTagAdd = false;
break;
case 'SPACE':
this.disableSpaceTriggerTagAdd = false;
break;
case 'BLUR':
this.disableBlurTriggerTagAdd = false;
break;
}
}
this.validation = args.validation;
this.onTagAdd = args.onTagAdd;
this.onTagRemove = args.onTagRemove;
this.onTagsInputComplete = args.onTagsInputComplete;
// Bind events
var self = this;
if (self.clickRemove) {
this.tagsBox.on('click', '.tag', function (e) {
removeTag.call(self, $(this));
if ($('.tag', self.tagsBox).length < self.tagsMaxCount) {
self.tagsInput.show();
}
});
}
else {
this.tagsBox.on('click', function (e) {
var evtSrc = $(e.target);
if (evtSrc.hasClass('remove')) {
removeTag.call(self, evtSrc.parent());
if ($('.tag', self.tagsBox).length < self.tagsMaxCount) {
self.tagsInput.show();
}
} else {
self.tagsInput.focus();
}
});
}
this.keyHoldOn = false;
this.tagsInput.on({
'keydown': function(e) {
switch (e.which) {
case 8: // Backspace
if (!self.tagsInput.val() && !self.keyHoldOn) {
removeTag.call(self, $('.tag', self.tagsBox).last());
} else {
self.keyHoldOn = true;
}
break;
case 32: // Space
if (!self.disableSpaceTriggerTagAdd) {
buildTags.call(self);
e.preventDefault();
}
break;
case 13: // Enter
if (!self.disableEnterTriggerTagAdd) {
buildTags.call(self);
// e.preventDefault();
}
break;
default:
}
},
'keyup': function(e) {
self.keyHoldOn = false;
},
'focus': function(e) {
clearTimeout('timer');
},
'focusout': function(e) {
if (!self.disableBlurTriggerTagAdd) {
// focusout 延迟 300ms 触发 buildTags
timer = setTimeout(function() {
buildTags.call(self);
}, 300);
}
}
});
}
};
TagsInput.prototype = {
constructor: TagsInput,
buildTags: function() {
buildTags.call(this);
},
addTags: function(tagsData) {
var tagHTML = '';
for (var i in tagsData) {
tagHTML += addTag.call(this, tagsData[i]).tagHTML;
}
return tagHTML;
},
addTagHandle: function (tag) {
return addTag.call(this, tag).tag;
},
getTags: function() {
var tags = [];
this.tagsBox.children('.tag').each(function() {
var obj = {
text: $(this).children('.tag-con').text()
};
var data = $(this).data();
if (data) {
obj.data = data;
}
tags.push(obj);
});
return tags;
},
resetTags: function(tagsStr) {
if (tagsStr && typeof(tagsStr) == 'string') {
$('.tag', this.tagsBox).remove();
buildTags.call(self);
}
}
};
module.exports = TagsInput;
});
;/*!wiki-common:widget/util/tween.js*/
define("wiki-common:widget/util/tween",function(n,t,e){var u={linear:function(n,t,e,u,a){return u*t/a+e},easeInSine:function(n,t,e,u,a){return-u*Math.cos(t/a*(Math.PI/2))+u+e},easeOutSine:function(n,t,e,u,a){return u*Math.sin(t/a*(Math.PI/2))+e},easeInOutSine:function(n,t,e,u,a){return-u/2*(Math.cos(Math.PI*t/a)-1)+e},easeInQuad:function(n,t,e,u,a){return u*(t/=a)*t+e},easeOutQuad:function(n,t,e,u,a){return-u*(t/=a)*(t-2)+e},easeInOutQuad:function(n,t,e,u,a){return(t/=a/2)<1?u/2*t*t+e:-u/2*(--t*(t-2)-1)+e},easeInCubic:function(n,t,e,u,a){return u*(t/=a)*t*t+e},easeOutCubic:function(n,t,e,u,a){return u*((t=t/a-1)*t*t+1)+e},easeInOutCubic:function(n,t,e,u,a){return(t/=a/2)<1?u/2*t*t*t+e:u/2*((t-=2)*t*t+2)+e},easeInQuart:function(n,t,e,u,a){return u*(t/=a)*t*t*t+e},easeOutQuart:function(n,t,e,u,a){return-u*((t=t/a-1)*t*t*t-1)+e},easeInOutQuart:function(n,t,e,u,a){return(t/=a/2)<1?u/2*t*t*t*t+e:-u/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(n,t,e,u,a){return u*(t/=a)*t*t*t*t+e},easeOutQuint:function(n,t,e,u,a){return u*((t=t/a-1)*t*t*t*t+1)+e},easeInOutQuint:function(n,t,e,u,a){return(t/=a/2)<1?u/2*t*t*t*t*t+e:u/2*((t-=2)*t*t*t*t+2)+e},easeInExpo:function(n,t,e,u,a){return 0==t?e:u*Math.pow(2,10*(t/a-1))+e},easeOutExpo:function(n,t,e,u,a){return t==a?e+u:u*(-Math.pow(2,-10*t/a)+1)+e},easeInOutExpo:function(n,t,e,u,a){return 0==t?e:t==a?e+u:(t/=a/2)<1?u/2*Math.pow(2,10*(t-1))+e:u/2*(-Math.pow(2,-10*--t)+2)+e},easeInCirc:function(n,t,e,u,a){return-u*(Math.sqrt(1-(t/=a)*t)-1)+e},easeOutCirc:function(n,t,e,u,a){return u*Math.sqrt(1-(t=t/a-1)*t)+e},easeInOutCirc:function(n,t,e,u,a){return(t/=a/2)<1?-u/2*(Math.sqrt(1-t*t)-1)+e:u/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInBack:function(n,t,e,u,a,r){return void 0==r&&(r=1.70158),u*(t/=a)*t*((r+1)*t-r)+e},easeOutBack:function(n,t,e,u,a,r){return void 0==r&&(r=1.70158),u*((t=t/a-1)*t*((r+1)*t+r)+1)+e},easeInOutBack:function(n,t,e,u,a,r){return void 0==r&&(r=1.70158),(t/=a/2)<1?u/2*t*t*(((r*=1.525)+1)*t-r)+e:u/2*((t-=2)*t*(((r*=1.525)+1)*t+r)+2)+e},easeInElastic:function(n,t,e,u,a){var r=1.70158,i=0,o=u;if(0==t)return e;if(1==(t/=a))return e+u;if(i||(i=.3*a),o
t?-.5*o*Math.pow(2,10*(t-=1))*Math.sin(2*(t*a-r)*Math.PI/i)+e:o*Math.pow(2,-10*(t-=1))*Math.sin(2*(t*a-r)*Math.PI/i)*.5+u+e},easeInBounce:function(n,t,e,a,r){return a-u.easeOutBounce(n,r-t,0,a,r)+e},easeOutBounce:function(n,t,e,u,a){return(t/=a)<1/2.75?7.5625*u*t*t+e:2/2.75>t?u*(7.5625*(t-=1.5/2.75)*t+.75)+e:2.5/2.75>t?u*(7.5625*(t-=2.25/2.75)*t+.9375)+e:u*(7.5625*(t-=2.625/2.75)*t+.984375)+e},easeInOutBounce:function(n,t,e,a,r){return r/2>t?.5*u.easeInBounce(n,2*t,0,a,r)+e:.5*u.easeOutBounce(n,2*t-r,0,a,r)+.5*a+e}};e.exports=u});
;/*!wiki-common:widget/util/animation.js*/
define("wiki-common:widget/util/animation",function(t,n,e){function i(t){1==arguments.length&&"object"==o.type(arguments[0])?(this.duration=isNaN(parseInt(t.duration))?400:Math.abs(parseInt(t.duration)),this.delay=isNaN(parseInt(t.delay))?0:Math.abs(parseInt(t.delay)),this.easing="function"==o.type(t.easing)?t.easing:"function"==o.type(r[t.easing])?r[t.easing]:r.easeOutQuad,this.onStart="function"==o.type(t.onStart)?t.onStart:null,this.onStep="function"==o.type(t.onStep)?t.onStep:null,this.onComplete="function"==o.type(t.onComplete)?t.onComplete:null):(this.duration=isNaN(parseInt(arguments[0]))?400:Math.abs(parseInt(arguments[0])),this.delay=0,this.onStep="function"==o.type(arguments[1])?arguments[1]:null,this.easing=arguments[2]&&"function"==o.type(arguments[2])?arguments[2]:"function"==o.type(r[arguments[2]])?r[arguments[2]]:r.easeOutQuad,this.onComplete="function"==o.type(arguments[3])?arguments[3]:null),this.elapsedTime=0,this.progress=0,this.curDuration=0,this.hasAniStarted=!1,this.aniState="STOP",this.resume()}function a(){return i.apply(this,arguments[0])}var o=t("wiki-common:widget/lib/jquery/jquery"),r=t("wiki-common:widget/util/tween"),s=t("wiki-common:widget/util/safeCall"),u=["webkit","moz"],m=1e3/60,p=+new Date,l=window.performance&&"function"==o.type(window.performance.now),c={};if(c.raf=window.requestAnimationFrame,c.caf=window.cancelAnimationFrame,!c.raf)for(var d=0;d0&&(this.delay=0),(this.aniRoll=function(n){var e=n-t.startTick;e>=t.delay&&(t.hasAniStarted?(t.curDuration=t.elapsedTime+e-t.delay,t.curDuration ').css("opacity",0).appendTo(this.host),"body"==this.host[0].tagName.toLowerCase()?this.node.css("position","fixed"):(this.node.css("position","absolute"),/^relative|absolute$/.test(this.host.css("position"))||this.host.css("position","relative"))};a.prototype={constructor:a,getNode:function(){return this.node},show:function(o,i){if(!this.isShown){var t=this;o=isNaN(parseInt(o))?200:Math.abs(parseInt(o)),this.node.css("opacity",0).show(),e(o,function(o){t.node.css("opacity",o*t.opacity)},"linear",function(){t.node.css("opacity",t.opacity),n(i,null,t),n(t.onShow,null,t)}),this.isShown=!0}},hide:function(o,i){if(this.isShown){var t=this;o=isNaN(parseInt(o))?200:Math.abs(parseInt(o)),e(o,function(o){t.node.css("opacity",(1-o)*t.opacity)},"linear",function(){t.node.hide(),n(i,null,t),n(t.onHide,null,t)}),this.isShown=!1}}},t.exports=a});
;/*!wiki-common:widget/util/checkCSS.js*/
define("wiki-common:widget/util/checkCSS",function(e,r,t){t.exports=function(e){var r=document.createElement("div"),t=["webkit","moz","o","ms"],n="";e=("string"==typeof e?e:"").replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()});for(var o=[e,e.replace(/-(\w)/g,function(e,r){return r.toUpperCase()})],i=0;i